<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2-多阶段动画的运动原理</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #box {
            background-color: powderblue;
        }
    </style>
</head>

<body>
    <div id="box" style="width: 100px; height: 100px;"></div>
    <script>
        var box = document.getElementById("box");
        box.onmouseenter = function() {
            //这里的this指的是box
            var _this = this;

            //添加定时器
            var p1 = setInterval(function() {
                //执行一阶段动画
                var w = parseInt(_this.style.width)

                //超过500就停止计时器
                if (w >= 500) {
                    clearInterval(p1);
                    _this.style.width = "500px";

                    //这里执行二阶段动画
                    var p2 = setInterval(function() {
                        var h = parseInt(_this.style.height)
                        if (h >= 400) {
                            clearInterval(p2);
                            _this.style.height = "400px";
                        } else {
                            _this.style.height = h + 5 + "px";

                        }

                    }, 16)
                } else {
                    _this.style.width = w + 5 + "px";
                }


            }, 16)
        }
    </script>
</body>

</html>